<template>
  <div class="role">
    <page-search :searchFormConfig="searchFormConfig" @resetClick="handleResetClick" @searchClick="handleSearchClick" />
    <page-content
      :contentTableConfig="contentTableConfig"
      ref="pageContentRef"
      pageName="role"
      @createData="handleCreateData"
      @editData="handleEditData"
    />
    <page-dialog
      ref="pageDialogRef"
      :dialogConfig="dialogConfig"
      pageName="role"
      :editInfo="editInfo"
      :otherInfo="menusInfo"
    >
      <div class="menu-tree" :key="new Date().getTime()">
        <el-tree
          ref="elTreeRef"
          :data="menus"
          show-checkbox
          node-key="id"
          highlight-current
          :props="{ children: 'children', label: 'name' }"
          :default-checked-keys="checkedKeys"
          :default-expanded-keys="checkedKeys"
          @check="handleMenuCheck"
        ></el-tree>
      </div>
    </page-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, ref } from 'vue'
import { useStore } from '@/store'

import pageSearch from '@/components/page-search'
import pageContent from '@/components/page-content'
import pageDialog from '@/components/page-dialog'

import { searchFormConfig } from './config/search-config'
import { contentTableConfig } from './config/content-config'
import { dialogConfig } from './config/dialog-config'

import { usePageSearch } from '@/hooks/use-page-search'
import { usePageDialog } from '@/hooks/use-page-dialog'

import { mapMenuToLeafKes } from '@/utils/map-menus'

import { ElTree } from 'element-plus'

export default defineComponent({
  name: 'role',
  components: {
    pageSearch,
    pageContent,
    pageDialog
  },
  setup() {
    const { pageContentRef, handleResetClick, handleSearchClick } = usePageSearch()

    const store = useStore()
    const menus = computed(() => store.state.entireMenu)

    // 修改菜单树
    const menusInfo = ref({})
    const handleMenuCheck = (data1: any, data2: any) => {
      const { checkedKeys, halfCheckedKeys } = data2
      const menuList = [...checkedKeys, ...halfCheckedKeys]
      menusInfo.value = { menuList }
    }

    // 处理菜单树
    const checkedKeys = ref<any>([])
    const elTreeRef = ref<InstanceType<typeof ElTree>>()
    const createCallBack = () => {
      checkedKeys.value = []
    }
    const editCallBack = (item: any) => {
      // 菜单树的回显
      checkedKeys.value = mapMenuToLeafKes(item.menuList)
    }
    const { pageDialogRef, handleCreateData, handleEditData, editInfo } = usePageDialog(createCallBack, editCallBack)

    return {
      searchFormConfig,
      contentTableConfig,
      dialogConfig,
      pageContentRef,
      handleResetClick,
      handleSearchClick,
      menus,
      menusInfo,
      handleMenuCheck,
      checkedKeys,
      elTreeRef,
      pageDialogRef,
      handleCreateData,
      handleEditData,
      editInfo
    }
  }
})
</script>

<style scoped lang="less">
.menu-tree {
  margin: 10px 0 0 30px;
}
</style>
